<template>
  <div class="mydiscover">
    <Top title="我的发布与评论" iconShow='1'>
    </Top>
    <div class="tab">
      <div v-for="(item,index) in list" :key="index" :class="index+1==selected?'tab-item active':'tab-item'" @click="getList(index+1)"><div>{{item.name}}</div></div>
    </div>
    <div v-show="selected==1" class="pad">
      <Mypublish></Mypublish>
    </div>
    <div v-show="selected==2" class="pad">
      <Mycomments></Mycomments>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import '../../../js/lib/flexble.js'
import commons from '../../../common/js/common.js'
import Top from 'components/Header/Header'
import Mypublish from './mypublish'
import Mycomments from './mycomments'
// import Mypublish from './mypublish'
import { Indicator, MessageBox } from "mint-ui";
export default {
  name: 'Applyrecord',
  components: { Top,Mypublish,Mycomments },
  data() {
    return {
      selected: 1,
      list:[{'name':'我的发布'},{'name':'我的评论'}]
    }
  },
  mounted () {
    Vue.http.interceptors.push((request, next) => { //请求拦截器
      //请求前
      request.headers.set('token', commons.getCookie('token')); //设置请求头
      Indicator.open('加载中...'); //请求loading
      next((response) => {
        //请求后
        Indicator.close(); //隐藏loading
        return response
      })
    })
  },
  methods: {
    getList(id){
      this.selected=id;
    }   
  }
}
</script>
<style lang="scss">
@import '../../../scss/base.scss';
.pad{
  padding-top: 3rem;
}
.tab{
    border-bottom: 1px solid #e4e4e4;
  z-index: 100;
  position: fixed;
  display: flex;
  margin-bottom: 0.5rem;
  margin-top: 1.2rem;
  height: 1.4rem;
  line-height: 1.4rem;
  background: #fff;
  width: 100%;
  &-item{
    flex: 1;
    position: relative;
    font-size: 0.4rem;
    font-weight: 800;
    color: #666;
     &:after{
            content:'';
            position:absolute;
            width:1px;
            height:rem(50);
            background: #e4e4e4;
            right:0px;
            top:50%;
            margin-top:rem(-25);
          }
  }
  .active{
    color: #48d8db;
      &:before{
            content:'';
            position:absolute;
            width:rem(130);
            height:1px;
            background: #48d8db;
            bottom:-1px;
            left: 50%;
            margin-left:rem(-65);
          }
  }
}

</style>
